.content {
  max-width: 4.14rem;

  .banner {
    height: 2.58rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .user-info {
    color: #FFFFFF;
    height: 1.13rem;
    background-color: #0781F3;

    .avatar {
      height: 100%;
      display: inline-block;
      vertical-align: top;
      line-height: 1.13rem;
      margin-left: 0.2rem;

      img {
        margin-top: 0.24rem;
        width: 0.48rem;
        height: 0.48rem;
        border-radius: 50%;
      }
    }
    .info {
      height: 100%;
      display: inline-block;
      vertical-align: top;
      margin-left: 0.11rem;
      width: 1.80rem;
      font-size: 18px;
      padding-top: 0.24rem
    }
    .account {
      display: inline-block;
      vertical-align: top;
      margin-top: 0.32rem;
      margin-left: 0.07rem;
      width: 0.72rem;
      height: 0.32rem;
      line-height: 0.32rem;
      border: 1px solid #FFFFFF;
      border-radius: 8px;
      font-size: 14px;
      padding: 0.06px 0.09px;
      text-align: center;
    }
  }

  .before-upgrade {
    color: #FFFFFF;
    background-color: #0781F3;

    .title {
      text-align: left;
      height: 0.22rem;
      line-height: 0.22rem;
      margin-left: 4.5%;

      icon {
        display: inline-block;
        vertical-align: middle;
        width: 0.04rem;
        height: 0.14rem;
        background: #FFFFFF;
        border-radius: 3px;
        line-height: 0.22rem;
      }
      title {
        display: inline-block;
        vertical-align: top;
        font-size: 16px;
        line-height: 0.22rem;
      }
    }

    .six-class {
      width: 90%;
      height: 1.79rem;
      background: #017AEB;
      border-radius: 8px;
      margin-top: 0.08rem;
      border: 2px dashed #006DD2;
      margin-left: 4.5%;
      text-align: center;

      .class-title {
        margin-top: 0.16rem;
        margin-bottom: 0.08rem;

        title {
          display: inline-block;
          width: 0.80rem;
          height: 0.28rem;
          background: #006DD2;
          border-radius: 14px;
          line-height: 0.28rem;
        }
      }

      .class-time {
        margin-top: 0.08rem;

        .li {
          height: 0.2rem;
          width: 92%;
          margin: 0 4%;
          padding: 0.16rem 0;
          font-size: 14px;
          line-height: 0.2rem;

          icon {
            display: inline-block;
            vertical-align: top;
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 50%;
            margin-top: 0.07rem;
            background: #006DD2;
            line-height: 0.2rem;
          }

          div {
            width: 92%;
            display: inline-block;
            .left {
              float: left;
            }

            .right {
              float: right;
            }
          }
        }

        .border-bottom {
          border-bottom: 1px solid rgba(0, 109, 210, 0.5);
        }
      }
    }
  }

  .upgrade {
    background-color: #0781F3;
    padding: 0.16rem 0;
    text-align: center;
    color: #FFFFFF;
    img {
      width: 0.3rem;
      height: 0.22rem;
    }
  }

  .after-upgrade {
    height: 1.26rem;
    margin-bottom: 1.1rem;
    color: #FFFFFF;
    background-color: #0781F3;
    position: relative;

    .overflow {
      width: 0.72rem;
      height: 0.72rem;
      position: absolute;
      top: 0.3rem;
      right: 4.5%;
    }

    .title {
      text-align: left;
      height: 0.22rem;
      line-height: 0.22rem;
      margin-left: 4.5%;

      icon {
        display: inline-block;
        vertical-align: middle;
        width: 0.04rem;
        height: 0.14rem;
        background: #FFFFFF;
        border-radius: 3px;
        line-height: 0.22rem;
      }
      title {
        display: inline-block;
        vertical-align: top;
        font-size: 16px;
        line-height: 0.22rem;
      }
    }

    #total-bill-gif-lessons-left-2 {
      font-size: 20px;
      font-weight: bold;
    }

    .four-class {
      width: 90%;
      height: 1.85rem;
      background: #FFFFFF;
      border-radius: 8px;
      margin-top: 0.08rem;
      border: 2px solid #FFFFFF;
      margin-left: 4.5%;
      text-align: center;
      color: #4A4A4A;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);

      .class-title {
        margin-top: 0.16rem;
        margin-bottom: 0.08rem;

        title {
          display: inline-block;
          width: 0.80rem;
          height: 0.28rem;
          color: #FFFFFF;
          background: #4A4A4A;
          border-radius: 14px;
          line-height: 0.28rem;
        }
      }

      .class-time {
        margin-top: 0.08rem;

        .li {
          height: 0.2rem;
          width: 92%;
          margin: 0 4%;
          padding: 0.16rem 0;
          font-size: 14px;
          line-height: 0.2rem;

          icon {
            display: inline-block;
            vertical-align: top;
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 50%;
            margin-top: 0.07rem;
            background: #23A4F9;
            line-height: 0.2rem;
          }

          .item {
            width: 92%;
            display: inline-block;

            .left {
              float: left;
            }

            .right {
              float: right;

              .title {
                color: #32CDFF;
                display: inline-block;
                height: 0.17rem;
                line-height: 0.17rem;
                vertical-align: top;
                padding: 0.01rem 0.08rem;
                border-top: 1px solid #32CDFF;
                border-left: 1px solid #32CDFF;
                border-bottom: 1px solid #32CDFF;
                border-right: 1px dashed #32CDFF;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
              }

              .money {
                color: #32CDFF;
                display: inline-block;
                height: 0.17rem;
                line-height: 0.17rem;
                vertical-align: top;
                padding: 0.01rem 0.08rem;
                border-top: 1px solid #32CDFF;
                border-bottom: 1px solid #32CDFF;
                border-right: 1px solid #32CDFF;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
              }
            }
          }
        }

        .border-bottom {
          border-bottom: 1px solid rgba(151, 151, 151, 0.05);
        }
      }
    }
  }

  .upgrade-btn {
    height: 0.48rem;
    margin: 0.16rem 4.5%;
    text-align: center;

    button {
      width: 100%;
      height: 0.48rem;
      color: #FFFFFF;
      border-radius: 7px;
      border: none;
      background: -webkit-linear-gradient(left, rgba(251,48,114,1),rgba(255,123,67,1));
      background: -o-linear-gradient(right, rgba(251,48,114,1),rgba(255,123,67,1));
      background: -moz-linear-gradient(right, rgba(251,48,114,1),rgba(255,123,67,1));
      background: linear-gradient(to right, rgba(251,48,114,1),rgba(255,123,67,1));
      box-shadow: 0px 0px 20px 0px rgba(255,43,86,0.2);
      line-height: 0.48rem;
      font-size: 16px;
      outline: none;
    }
  }

  .upgrade-rule {
    width: 90%;
    margin-left: 4.5%;
    margin-bottom: 0.21rem;
    border: 2px dashed #E1E1E1;
    border-radius: 5px;

    h3 {
      text-align: center;
      margin: 0.16rem 0;
    }

    .sub-title {
      text-align: left;
      height: 0.20rem;
      line-height: 0.20rem;
      margin-left: 0.25rem;

      icon {
        display: inline-block;
        vertical-align: top;
        margin-top: 0.03rem;
        width: 0.04rem;
        height: 0.14rem;
        background: #4A4A4A;
        border-radius: 3px;
      }
      title {
        display: inline-block;
        vertical-align: top;
        font-size: 16px;
        line-height: 0.20rem;
      }
    }

    .rule-content {
      color: #4A4A4A;
      line-height:17px;
      margin: 0.08rem 0.25rem 0.24rem 0.25rem;
    }
  }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }
}